<template>
  <div class="person-container">
    <div class="person-data">

      <el-form :inline="true" :model="params" class="demo-form-inline">

        <el-form-item label="姓名" style="padding-left: 200px">
          <el-input v-model="params.name" placeholder="请输入姓名"></el-input>
        </el-form-item>

        <el-form-item label="审核人" style="padding-left: 50px">
          <el-select v-model="params.reviewer"  placeholder="请选择审核人">
            <el-option label="博士" value="0"></el-option>
            <el-option label="硕士" value="1"></el-option>
            <el-option label="本科" value="2"></el-option>
            <el-option label="专科" value="3"></el-option>
            <el-option label="其他" value="4"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="学历" style="padding-left: 50px">
          <el-select v-model="params.education"  placeholder="请选择学历">
            <el-option label="博士" value="0"></el-option>
            <el-option label="硕士" value="1"></el-option>
            <el-option label="本科" value="2"></el-option>
            <el-option label="专科" value="3"></el-option>
            <el-option label="其他" value="4"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="毕业学校" style="padding-left: 50px;">
          <el-input v-model="params.graduationSchool" placeholder="请输入毕业学校"></el-input>
        </el-form-item>

        <el-form-item label="期望岗位" style="padding-left: 250px;">
          <el-input v-model="params.expectedPosition" placeholder="请输入期望岗位"></el-input>
        </el-form-item>

        <el-form-item label="时间范围" style="padding-left: 50px">
            <el-date-picker v-model="params.dateTime" type="datetimerange"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['12:00:00']"
                            value-format = "yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
        </el-form-item>

        <el-form-item  style="padding-left: 20px">
          <el-button type="primary" @click="queryPersonnel">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="exportPersonnel">导出</el-button>
        </el-form-item>

      </el-form>

      <el-table :data="personnelList"  style="width: 100%" >
        <el-table-column label="头像"  width="120" align="center">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.avatar"
              :fit="scope.row.name">
            </el-image>
          </template>
        </el-table-column>

        <el-table-column prop="name" label="姓名" width="120" align="center"></el-table-column>
        <el-table-column prop="phone" label="手机号" width="120" align="center" ></el-table-column>
        <el-table-column prop="email" label="邮箱" width="200" align="center"></el-table-column>
        <el-table-column prop="politicCountenanceStr" label="政治面貌" width="100" align="center"></el-table-column>
        <el-table-column prop="educationStr" label="学历" width="100" align="center"></el-table-column>
        <el-table-column prop="graduationSchool" label="毕业院校" width="200" align="center"></el-table-column>
        <el-table-column prop="expectedPosition" label="期望岗位" width="120" align="center"></el-table-column>
        <el-table-column prop="expectedSalary" label="期望薪资" width="120" align="center"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="120" align="center"></el-table-column>



        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button @click="getById(scope.row.id)" type="text" size="small">查看</el-button>
            <el-button @click="reviewById(scope.row.id)" type="text" size="small">审核</el-button>
            <el-button @click="edit(scope.row.id)" type="text" size="small">编辑</el-button>
            <el-button @click="remove(scope.row.id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        style="margin-top:10px;margin-left: 40%"
        background
        layout="prev, pager, next"
        @current-change = "changePage"
        :page-size="pageSize"
        :total="total">
      </el-pagination>


      <el-dialog title="删除选项" :visible.sync="delInfoFlag" width="400px"  @close="cancel">
        <el-form :model="delInfo" :rules="delIn"  ref="dialogDescription">
          <el-form-item label="删除原因" :label-width="'50px'" prop="description">
            <el-input v-model="delInfo.description" autocomplete="off" type="textarea" :rows="8"> </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取消删除</el-button>
          <el-button type="primary" @click="deletePerson">确定删除</el-button>
        </div>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import {listPersonInfo, pageListPersonInfo,delPersonInfo} from "@/api/personnel";
import request from "@/utils/request";

export default {
  data(){
    return{
      id:'',
      current:1,
      pageSize:4,
      total:0,
      params:{},
      personnelList:[],
      delInfo:{},
      delInfoFlag:false,
      delIn:{
        description:[{ required: true, message: '请输入备注信息', trigger: 'blur' },]
      }
    }
  },
  created() {
    this.list()
  },
  activated() {
    this.list()
  },
  methods:{
    queryPersonnel(){
      if (this.params.dateTime instanceof Array){
        this.params.startTime = this.params.dateTime[0]
        this.params.endTime = this.params.dateTime[1]
      }
      this.changePage(1)
    },
    exportPersonnel(){
      const url = request.defaults.baseURL

      let startTime = ""
      let endTime = ""

      if (this.params.dateTime instanceof Array){
         startTime = this.params.dateTime[0]
         endTime = this.params.dateTime[1]
      }

      let educationStr = this.params.education

      window.location.href = url+'/exportExcelController/personnel?' +
        'startTime='+startTime
        +'&endTime='+endTime
        +'&name='+this.params.name
        +'&educationStr='+ educationStr
        +'&graduationSchool='+ this.params.graduationSchool
        +'&expectedPosition='+ this.params.expectedPosition
    },
    async reset(){
      this.params = {}
      await this.list()
    },
    getById(id){
      this.$router.push({path:'/personnel/info/'+id})
    },
    edit(id){
      this.$router.push({path:'/personnel/edit/'+id})
    },
    reviewById(id){
      this.$router.push({path:'/personnel/review/'+id})
    },

    async list(){
      const {data:res} = await listPersonInfo(1,this.pageSize)
      this.personnelList = res.data.records
      this.total = res.data.total
      this.params = {}
    },
    async changePage(current){
      const {data:res} = await pageListPersonInfo(current,this.pageSize,this.params)
      this.personnelList = res.data.records
      this.total = res.data.total
      this.params = {}
    },
    remove(id){
      this.delInfoFlag = true
      this.id = id
    },
    async deleteById(){
      const {data:res} = await delPersonInfo(this.id,this.delInfo)
    },

    cancel(){
      this.delInfoFlag = false
      this.delInfo = {}
    },

    deletePerson(){
      this.$refs.dialogDescription.validate((valid) => {
        if (valid) {
          this.$confirm('此操作将永久删除个人信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.deleteById()
            this.delInfoFlag = false
            this.$message({type: 'success', message: '删除成功!'});
            this.$router.go(0)
          }).catch(() => {
            this.$message({type: 'info', message: '已取消删除'});
          });
        } else {
          this.$message({
            message: '请按表单校验规则添加数据',
            type: 'warning'
          });
          return false;
        }
      })
    }
  }
}
</script>

<style scoped>
.person-container{
  position:absolute;
  height:100%;
  width:100%;
}
.person-data{
  margin:2% 5% 2% 5%;
}
</style>
